import React, { useMemo } from "react";
import HomeHeadStyle from "./HomeHead.module.scss";
import timg from "../assets/images/logo512.png";

export default function HomeHead(props) {
  const { today } = props;

  // 计算时间中的月和日
  let times = useMemo(() => {
    let a = today.match(/^\d{4}(\d{2})(\d{2})$/);
    console.log(a);
    let [, months, day] = today.match(/^\d{4}(\d{2})(\d{2})$/),
      area = [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ];
    return {
      month: area[parseInt(months) - 1],
      day,
    };
  }, [today]);

  return (
    <div className={HomeHeadStyle["home-head-box"]}>
      <div className={HomeHeadStyle.info}>
        <div className={HomeHeadStyle.time}>
          <span>{times.day}</span>
          <span>{times.month}</span>
        </div>
        <div className={HomeHeadStyle.title}>知乎日报</div>
      </div>
      <div className={HomeHeadStyle.photo}>
        {/* 在 jsx 中，想直接导入静态资源图片，不能使用相对路径。因为打包处理后，项目的结构目录会被改变 */}
        {/* 如果是css样式中使用相对路径，打包后会处理css的图片导入，所有可以使用相对路径 */}
        {/* 其主要做以下操作：1.把需要的图片打包 2.把打包后的地址重新覆盖css中写的地址 */}
        {/* 解决方法：1.使用绝对路径或网址路径 2.基于ES6Module模块的方式导入图片 */}
        <img src={timg} alt="" />
      </div>
    </div>
  );
}
